<template>
	<text class="root-text-class" :style="rootStyle" @tap="handleTap">{{text}}</text>
</template>

<script>
	export default {
		props:{
			value:{
				type: [Number, String, Boolean],
				default: ''
			},
			color: {
				type:String,
				default: '#333333'
			},
			selectable: {
				type: Boolean,
				default: false
			},
			size: {
				type: [Number, String],
				default: 24
			},
			lineHeight: {
				type:[Number, String],
				default: ''
			},
			decode: {
				type: String,
				default: ''
			},
			max: {
				type: Number,
				default: -1
			},
			//配合max，超过规定字数是否拼接省略号
			ellipsis: {
				type: Boolean,
				default: false
			},
			//行省略
			lines: {
				type: [Number, String],
				default: 0
			},
			align: {
				type: String,
				default: 'left'
			},
			fontStyle: {
				type:[Number, String],
				default: 'static'
			},
			weight: {
				type: String,
				default: 'none'
			},
			family: {
				type: String,
				default: 'static'
			}
		},
		data () {
			return {
				loading: false
			}
		},
		computed: {
			rootStyle () {
				return Object.assign({}, {
					color: this.color,
					fontSize: this.pixelunit(this.size),
					fontWeight: this.weight,
					fontStyle: this.fontStyle,
					fontFamily: this.family,
					'text-align': this.align,
					lineHeight: this.lineHeight ? this.pixelunit(this.lineHeight) : (this.unitpixel(this.size) + 4) + 'px'
				}, this.lines > 0 ? {
					// #ifdef APP-NVUE
					lines: this.lines,
					'text-overflow': 'ellipsis'
					// #endif
					// #ifndef APP-NVUE
					display: '-webkit-box !important',
					overflow: 'hidden',
					'text-overflow': 'ellipsis',
					'word-break': 'break-all',
					'-webkit-box-orient':'vertical',
					'-webkit-line-clamp': this.lines
					// #endif
				} : {})
			},
			text () {
				return this.max > -1 ? this.value.slice(0, this.max) + (this.value.length > this.max && this.ellipsis ? '...' : '') : this.value
			}
		},
		methods: {
			pixelunit (size) {
				const text = size.toString()
				return text.indexOf('px') > -1 ? text : text + 'rpx'
			},
			unitpixel (size) {
				const text = size.toString()
				return text.indexOf('rpx') > -1 ? uni.upx2px(text.replace('rpx', '')) : text.indexOf('px') > -1 ? parseFloat(text.replace('px', '')) : uni.upx2px(text)
			},
			handleTap (e) {
				this.$emit('click', e)
			}
		}
	}
</script>

<style>
	.root-text-class {
		word-break: break-all; /* 允许在单词内部断句 */
		word-wrap: break-word; /* 防止内容溢出容器 */
		white-space: normal; /* 允许文本自动换行 */
	}
</style>
